<template>
<div class="root">
    <div class="swiper mySwiper3">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <div class="title" data-swiper-parallax="-300">Study</div>
          <div class="subtitle" data-swiper-parallax="-200">Subtitle</div>
          <div class="text" data-swiper-parallax="-100">
            <p>
              The people who get on in this world are the people who get up and look for circumstances they want , and if they cannot find them .they make them.
　　在这个世界上，取得成功的人是那些努力寻找他们想要机会的人，如果找不到机会，他们就去创造机会。—— 肖伯纳
            </p>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="title" data-swiper-parallax="-300">Study</div>
          <div class="subtitle" data-swiper-parallax="-200">Subtitle</div>
          <div class="text" data-swiper-parallax="-100">
            <p>
              The important thing in life is to have a great aim , and the determination to attain it.
　　         人生重要的事情就是确定一个伟大的目标，并决心实现它。—— 歌德
            </p>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="title" data-swiper-parallax="-300">Study</div>
          <div class="subtitle" data-swiper-parallax="-200">Subtitle</div>
          <div class="text" data-swiper-parallax="-100">
            <p>
              Love suffers long and is kind; love does not envy; love does not parade itself, is not puffed up; does not behave rudely, does not seek its ovn, is not provoked, thinks no evil; does not rejoice in iniquity, but rejoices in the truth; bears all things, believes all things, hopes all things, endures all things. Love never fail.
　　爱可以天长地久并仁慈；爱不嫉妒；爱不夸耀，爱不吹捧；爱不粗鲁行事，爱不索求，不挑衅，不思邪；不因不公而喜悦，但却为真理而欢欣；爱承担一切，相信一切，希望一切，忍耐一切。爱从不失败。
            </p>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="title" data-swiper-parallax="-300">Study</div>
          <div class="subtitle" data-swiper-parallax="-200">Subtitle</div>
          <div class="text" data-swiper-parallax="-100">
            <p>
              The man who has made up his mind to win will never say "impossible ".
　　凡是决心取得胜利的人是从来不说“不可能的”。——拿破仑
            </p>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="title" data-swiper-parallax="-300">Study</div>
          <div class="subtitle" data-swiper-parallax="-200">Subtitle</div>
          <div class="text" data-swiper-parallax="-100">
            <p>
              The only limit to our realization of tomorrow will be our doubts of today .
　　实现明天理想的唯一障碍是今天的疑虑。 ——罗斯福
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="login-container">
    <el-form :model="ruleForm2" :rules="rules2"
             status-icon
             ref="ruleForm2"
             label-position="left"
             label-width="0px"
             class="demo-ruleForm login-page">
      <h3 class="title">教师登录</h3>
      <el-form-item prop="username">
        <el-input type="text"
                  v-model="ruleForm2.username"
                  auto-complete="off"
                  placeholder="用户名"
        ></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input type="password"
                  v-model="ruleForm2.password"
                  auto-complete="off"
                  placeholder="密码"
        ></el-input>
      </el-form-item>
      <el-checkbox
        v-model="checked"
        class="rememberMe"
      >记住密码
      </el-checkbox>
      <el-form-item style="width:100%;">
        <el-button type="primary" style="width:100%;" @click="handleSubmit" :loading="logining">登录</el-button>
      </el-form-item>
    </el-form>
    </div>
</div>
</template>

<style scoped>
 html,
      body {
        position: relative;
        height: 100%;
      }

      body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color: #000;
        margin: 0;
        padding: 0;
      }

      body {
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color: #000;
        margin: 0;
        padding: 0;
      }
      .root{
        height:100%;
        width: 100%;
      }
      .swiper {
        width: 100%;
        height: 100%;
      }

      .swiper-slide {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        font-weight: bold;
        color: #fff;
      }
      .swiper-slide {
        font-size: 18px;
        color: #fff;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding: 40px 60px;
      }

      .swiper-slide .title {
        font-size: 41px;
        font-weight: 300;
        position: absolute;
        right: 5%;
        top: 10%;
      }

      .swiper-slide .subtitle {
        font-size: 21px;
      }

      .swiper-slide .text {
        font-size: 14px;
        max-width: 400px;
        line-height: 1.3;
        position: absolute;
        right: 5%;
        top: 20%;
        width:20%
      }

      .swiper-slide:nth-child(1n) {
        background-image: url('./images/1.jpg');
      }

      .swiper-slide:nth-child(2n) {
        background-color: rgb(0, 140, 255);
      }

      .swiper-slide:nth-child(3n) {
        background-color: rgb(10, 184, 111);
      }

      .swiper-slide:nth-child(4n) {
        background-color: rgb(211, 122, 7);
      }

      .swiper-slide:nth-child(5n) {
        background-color: rgb(118, 163, 12);
      }
.login-container {
   position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%); 
  z-index: 999;
}

.title {
  margin-top: auto;
  text-align: center;
}

.login-page {
  -webkit-border-radius: 5px;
  border-radius: 5px;
  width: 350px;
  padding: 35px 35px 15px;
  background: #fff;
  border: 1px solid rgb(71, 71, 71);
  box-shadow: 1px 1px 25px 5px rgb(2, 2, 2);
}

label.el-checkbox.rememberMe {
  margin: 0px 0px 15px;
  text-align: left;
}
</style>


<script>
import {getLogin} from "../../api/data";
// import Swiper from 'swiper';
import Swiper from 'swiper/swiper-bundle.js';
import 'swiper/swiper-bundle.min.css';
export default {
  data() {
    return {
      logining: false,
      ruleForm2: {
        roles: '',
        username: '',
        password: '',
      },
      rules2: {
        username: [{required: true, message: '请输入账号', trigger: 'blur'}],
        password: [{required: true, message: '请输入密码', trigger: 'blur'}]
      },
      checked: false
    }
  },
  mounted() {
    new Swiper(".mySwiper3", {
        grabCursor: true,
        effect: "creative",
        creativeEffect: {
          prev: {
            shadow: true,
            translate: ["-20%", 0, -1],
          },
          next: {
            translate: ["100%", 0, 0],
          },
        },
        loop:true,
        speed : 3000, //速度
        freeMode : true, //根据惯性滑动可能不止一格且不会贴合
        observer : true, //修改swiper自己或子元素时，自动初始化swiper
        // autoplay : true, //自动切换
        autoplay : {
            delay : 2000, //自动切换的时间间隔，单位ms
            disableOnInteraction : false //用户操作swiper之后，是否禁止autoplay
        },
      });
  },
  methods: {
    handleSubmit() {
      let data = {rid: 2, pwd: this.ruleForm2.password, uid: this.ruleForm2.username}
      getLogin(JSON.stringify(data)).then(res => {
        sessionStorage.setItem('token',JSON.stringify(res.data))
        this.$refs.ruleForm2.validate((valid) => {
          if (valid) {
            this.logining = true;
            if (res.code === 0) {
              this.logining = false;
              sessionStorage.setItem('user', this.ruleForm2.username);
              this.$router.replace({path: '/home'});
            } else if (res.code === 1) {
              this.logining = false;
              this.$message.error('账号或者密码错误!');
            } else if (res.code === 2) {
              this.logining = false;
              this.$message.error('请检查信息是否输入完整');
            } else {
              this.logining = false;
              this.$message.error('权限不足');
            }
          } else {
            console.log('提交错误');
            return false;
          }
        })
      })
    }
  }
};
</script>


